import { DatePicker } from 'antd'
import dayjs from 'dayjs'
import { useState } from 'react'
const { RangePicker } = DatePicker

function MyDatePicker({
  selectedDateString,
  setSelectedDateString,
  initialDate
}) {
  // 保存选择的日期
  const [selectedDate, setSelectedDate] = useState()

  const rangePresets = [
    {
      label: '最近一周',
      value: [dayjs().add(-7, 'd'), dayjs()]
    },
    {
      label: '最近一个月',
      value: [dayjs().add(-30, 'd'), dayjs()]
    },
    {
      label: '最近三个月',
      value: [dayjs().add(-90, 'd'), dayjs()]
    }
  ]
  // 日期切换获取日期
  const onRangeChange = (dates, dateStrings) => {
    if (dates && selectedDateString !== dateStrings[0]) {
      // console.log('From: ', dates[0], ', to: ', dates[1])
      // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      setSelectedDate(dates)
      setSelectedDateString(dateStrings)
      console.log(dateStrings)
    } else {
      // setSelectedDate(null)
    }
  }
  return (
    <RangePicker
      value={selectedDate}
      presets={rangePresets}
      onChange={onRangeChange}
    />
  )
}

export default MyDatePicker
